<template>
    <div style="margin: 20px 30px">
        <div v-for="(item, index) in list" :key="index" class="create_material_form">
            <div style="display:flex;align-items: center">
                <div style="flex: 1;font-size: 14px">内容{{ index + 1 }}</div>
                <div style="flex: 5">
                    <el-radio-group v-if="type == 'sop'" v-model="item.contentType" @change="typeChangeHandle($event, index)">
                        <el-radio :label="1">文本</el-radio>
                        <el-radio :label="2">图片</el-radio>
<!--                        <el-radio :label="4">文件</el-radio>-->
                    </el-radio-group>
                    <el-radio-group v-else v-model="item.contentType" @change="typeChangeHandle($event, index)">
                        <el-radio :label="1">文本</el-radio>
                        <el-radio :label="2">图片</el-radio>
                        <el-radio :label="3">视频</el-radio>
                        <el-radio :label="4">文件</el-radio>
                        <el-radio :label="5">链接</el-radio>
<!--                        <el-radio :label="6">营销内容</el-radio>-->
                    </el-radio-group>
                    <el-button type="text" v-if="list.length > 1" style="cursor:pointer"
                               class="el-icon-delete" @click="deleteContent(index)"></el-button>
                </div>
            </div>
            <div>
                <el-card v-if="item.contentType == '1'" class="taskContent">
                    <div slot="header" class="clearfix" v-if="type != 'sop'">
                        <div style="display:flex;align-items: center;">
                            <div style="font-size: 14px;">插入：</div>
                            <el-button @click="item.content += '#员工名称#'" type="text" >员工名称</el-button>
                            <el-button @click="item.content += '#客户昵称#'" type="text" >客户昵称</el-button>
                        </div>
                    </div>
                    <div>
                        <el-input
                                style="width: 100%;height: 100%;"
                                type="textarea"
                                placeholder="请输入任务内容"
                                v-model="item.content"
                                maxlength="300"
                                show-word-limit>
                        </el-input>
                    </div>
                </el-card>
                <el-card v-if="item.contentType == '2'">
                    <el-upload
                            class="avatar-uploader"
                            :action="$uri + '/api/file/upload'"
                            :show-file-list="false"
                            :on-success="uploadSuccess"
                            :data="params"
                            :before-upload="beforeUploadPictureHandle">
                        <img v-if="item.imageUrl" :src="item.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon" @mouseover="setFileType(index)"></i>
                        <div slot="tip" class="el-upload__tip">jpg/png格式，2M以内</div>
                    </el-upload>
                </el-card>
                <el-card v-if="item.contentType == '3'">
                    <el-upload
                            class="avatar-uploader"
                            :action="$uri + '/api/file/upload'"
                            :show-file-list="false"
                            :on-success="uploadSuccess"
                            :data="params"
                            :before-upload="beforeUploadMp4Handle">
                        <img v-if="item.imageUrl" :src="item.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon" @mouseover="setFileType(index)"></i>
                        <div slot="tip" class="el-upload__tip">mp4格式，10M以内</div>
                    </el-upload>
                </el-card>
                <el-card v-if="item.contentType == '4'">
                    <el-upload
                            class="avatar-uploader"
                            :action="$uri + '/api/file/upload'"
                            :show-file-list="false"
                            :on-success="uploadSuccess"
                            :data="params"
                            :before-upload="beforeUploadFileHandle">
                        <img v-if="item.imageUrl" :src="item.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon" @mouseover="setFileType(index)"></i>
                        <div slot="tip" class="el-upload__tip">20M以内</div>
                    </el-upload>
                </el-card>
                <div v-if="item.contentType == '5'">
                    <el-input type="text" placeholder="输入http开头或者https开头的链接（必填）" v-model="item.linkContent.linkAddress" maxlength="500" show-word-limit style="margin-top: 10px"></el-input>
                    <el-input type="text" placeholder="输入链接标题（必填)" v-model="item.linkContent.linkTitle" maxlength="200" show-word-limit style="margin-top: 10px"></el-input>
                    <el-input type="textarea" placeholder="输入内容简介（选填)" v-model="item.linkContent.content" maxlength="1000" show-word-limit style="margin-top: 10px"></el-input>
                </div>
<!--                <el-card v-if="item.contentType == '6'">
                    <div style="height: 150px">
                        <el-button plain>添加营销内容</el-button>
                    </div>
                </el-card>-->
            </div>
        </div>
        <el-button type="text" icon="el-icon-circle-plus-outline" @click="addContent">继续添加</el-button>
    </div>
</template>

<script>

const mp4Image = require('@/assets/img/MP4.png')
const fileImage = require('@/assets/img/file.png')

const initContentList = [
        {
            contentType: 1,
            content: '',
            imageUrl: '',
            linkContent: {
                linkAddress: '',
                linkTitle: '',
                content: ''
            }
        }
    ]
export default {
    name: "type_content_text",
    props: {
        contentList: {
            type: Array,
            default() {
                return [...initContentList];
            }
        },
        clientInfo: {
            type: Object,
            default: () => {}
        },
        type: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            defaultList: [...initContentList],
            list:[...initContentList],
            contentIndex: 0,
            params: {
                'type': '1',
                'clientId': "",
                'fileSize': "",
                'accessoriesType': "5"
            },
        }
    },
    watch: {
        contentList(n, o) {
            let json = JSON.stringify(n)
            this.list = [...JSON.parse(json)]
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        handleRemove(file) {
            this.$message.error("error")
        },
        addContent() {
            this.list.push({
                contentType: 1,
                content: '',
                imageUrl: '',
                linkContent: {
                    linkAddress: '',
                    linkTitle: '',
                    content: ''
                }
            })
        },
        deleteContent(index) {
            this.list.splice(index, 1)
        },
        initData() {
            this.list = [
                {
                    contentType: 1,
                    content: '',
                    imageUrl: '',
                    linkContent: {
                        linkAddress: '',
                        linkTitle: '',
                        content: ''
                    }
                }
            ]
        },
        typeChangeHandle(e, index) {
            this.contentList[index]["imageUrl"] = ""
        },
        getData() {
            let list = this.list
            list.map((item) => {
                if (item.contentType == '3' || item.contentType == '4') {
                    item['imageUrl'] = ""
                }
            })
            return list;
        },
        setFileType(index) {
            this.contentIndex = index
        },
        beforeUploadPictureHandle(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === "image/png";
            if (!isJPG) {
                this.$message.error('图片只能是 JPG/PNG 格式!');
            }
            if (file.size > 1024 * 1000 * 2) {
                this.$message.error('文件超出2M');
                return false
            }
            this.params['clientId'] = this.clientInfo != null && this.clientInfo.clientId != "" ? this.clientInfo.clientId : ""
            this.params['fileSize'] = file.size
        },
        beforeUploadMp4Handle(file) {
            const isJPG = file.type === 'video/mp4';
            if (!isJPG) {
                this.$message.error('只能是 MP4 格式!');
            }
            if (file.size > 1024 * 10000) {
                this.$message.error('文件超出10M');
                return false
            }
            this.params['clientId'] = this.clientInfo != null && this.clientInfo.clientId != "" ? this.clientInfo.clientId : ""
            this.params['fileSize'] = file.size
        },
        beforeUploadFileHandle(file) {
            if (file.size > 1024 * 2 * 10000) {
                this.$message.error('文件超出20M');
                return false
            }

            this.params['clientId'] = this.clientInfo != null && this.clientInfo.clientId != "" ? this.clientInfo.clientId : ""
            this.params['fileSize'] = file.size
        },
        uploadSuccess(e, file) {
            let fileName = this.$uri + '/api/linux/client/' + e.fileEntities[0]['newFileNames'];
            let suffix = fileName.substring(fileName.lastIndexOf("."));
            let newFile = "none";
            if (suffix === '.png' || suffix === '.jpg') {
                newFile = fileName
            } else if (suffix === '.mp4') {
                newFile = mp4Image
                this.list[this.contentIndex]["fileName"] = e.fileEntities[0]['newFileNames']
            } else {
                newFile = fileImage
                this.list[this.contentIndex]["fileName"] = e.fileEntities[0]['newFileNames']
            }

            this.list[this.contentIndex]["imageUrl"] = newFile
        }
    }
}
</script>

<style>
.create_material_form .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.create_material_form .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.create_material_form .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.create_material_form .avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>

<style>
.taskContent .el-card__body {
    padding: 0;
}

.taskContent .el-textarea .el-textarea__inner {
    min-height: 150px !important;
}
</style>

<style scoped>
/deep/ .el-card__header {
    padding: 0 20px;
}
</style>
